

<template>
  <div>
    <!--头部的编辑按钮-->
    <!--左侧的检测项目显示区域-->
      <div class="button-container">
        <span>当前为：{{parentLabel}}>>{{ChildrenLabel}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-button type="info" plain size="mini">添加检测项</el-button>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          border height="57vh"
          @row-click="rowClick">
        <el-table-column
            prop="project"
            :label="List1"
            width="150pxS"
            style="text-align: center">
        </el-table-column>
        <el-table-column
            prop="requirement"
            :label="List2">
        </el-table-column>
        <el-table-column
            :label="List3"
            width="150px">
        </el-table-column>
        <el-table-column
            :label="List4"
            width="80px">
        </el-table-column>
        <el-table-column
            :label="List5"
            width="60px">
          <template v-slot:default="scope">
            <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
            <br>
            <el-link type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    <!--右侧图片显示部分-->
    <!--拆解步骤左侧的“拆解步骤”图片、录像展示部分-->

    <!---------------------->
    <!---------------------->
    <!--用在返工返修作业指导书中点击“操作”中的“编辑”按钮时，弹出的Dialog-->
    <el-dialog
        title="提示"
        :visible.sync="editDialogVisible"
        width="70%"
        center>
      <span style="font-size: 18px">现在修改的是:{{parentLabel}}---{{ChildrenLabel}}</span>

      <!--修改检测项目-->
      <br><br>
      <!--设置检测项目区域-->
      <div class="inputD">
        <div class="card-container">
          <!--中文检测项目-->
          <div class="card-edit">
            <span>检测项目：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                v-model="tableDataTemp.project"
                placeholder="请输入内容">
            </el-input>
          </div>
        <!--英文检测项目-->
          <div class="card-edit">
            <span>Testing items：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="tableDataTemp.projectEnglish">
            </el-input>
          </div>
        <!--俄文检查项目-->
          <div class="card-edit">
            <span>Проверка проектов：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="tableDataTemp.projectRussian">
            </el-input>
          </div>
      </div>
    </div>

      <!--设置检测要求区域-->
      <div class="inputD">
        <div class="card-container">
          <!--中文检测要求-->
          <div class="card-edit">
            <span>检测要求：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="tableDataTemp.requirement">
            </el-input>
          </div>
          <!--英文检测要求-->
          <div class="card-edit">
            <span>Testing requirements：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="tableDataTemp.requirementEnglish">
            </el-input>
          </div>
          <!--俄文检测要求-->
          <div class="card-edit">
            <span>Требования к проверке：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 2}"
                placeholder="请输入内容"
                v-model="tableDataTemp.requirementRussian">
            </el-input>
          </div>
        </div>
      </div>

      <!--设置检测标准区域-->
      <div class="inputD">
        <div class="card-container">
          <!--标准类型-->
          <div class="card-edit">
            <span>typeTesting：</span><br><br>
            <el-select v-model="typeTestingValue" placeholder="请选择" size="small">
              <el-option
                  v-for="item in typeTestingTemp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>

          <!--标准值设定-->
          <div class="card-edit">
            <span>standard：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 1}"
                placeholder="请输入内容"
                v-model="tableDataTemp.standard"
                v-if="isMetering">
            </el-input>
          </div>

          <!--上偏差设定-->
          <div class="card-edit">
            <span>ceiling：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 1}"
                placeholder="请输入内容"
                v-model="tableDataTemp.ceiling"
                v-if="isMetering">
            </el-input>
          </div>

          <!--下偏差设定-->
          <div class="card-edit">
            <span>lower：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 1}"
                placeholder="请输入内容"
                v-model="tableDataTemp.lower"
                v-if="isMetering">
            </el-input>
          </div>

          <!--检测频次-->
          <div class="card-edit">
            <span>frequency(%)：</span><br><br>
            <el-input
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 1}"
                placeholder="请输入内容"
                v-model="tableDataTemp.frequency">
            </el-input>
          </div>

            <!--实施部门-->
            <div class="card-edit">
              <span>Department：</span><br><br>
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 1}"
                  placeholder="请输入内容"
                  v-model="tableDataTemp.department">
              </el-input>
            </div>
          </div>
        </div>
      <div class="inputD">
        <up-load
          @fileList.passive="fileListAll"
          :pictureUrl="pictureList"></up-load>
      </div>

      <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editDialogConf">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import UpLoad from "@/components/utils/UpLoad.vue"
import {filepath} from "@/configUse";
export default {
  name: "UseListTesting",
  components:{
    UpLoad,
  },
  data(){
    return{
      List1: '检测项目',
      List2: '检测要求',
      List3: '标准',
      List4: '实施部门',
      List5: '编辑',
      //加载的时候，接收后端的信息。
      tableData: [
        {
          //记录唯一的ID
          id:0,
          //记录车间名称（附表，统一用英文名称）
          workshopEnglish:'',
          //记录返工返修作业文件的名称（附表，统一用英文名称）
          taksNameEnglish:'',
          //记录图片的文件名
          fileNameAll:'',
          //记录检验项目
          project:'',
          //记录检验项目（英文）
          projectEnglish:'',
          //记录检验项目（俄文）
          projectRussian:'',
          //记录检验要求
          requirement:'',
          //记录检验要求（英文）
          requirementEnglish:'',
          //记录检验要求（俄文）
          requirementRussian:'',
          //记录检测类型
          typeTesting:'',
          //记录标准值
          standard:'',
          //记录上偏差
          ceiling:'',
          //记录下偏差
          lower:'',
          //记录创建时间
          establishTime:'',
          //记录实施部门
          department:'',
          //记录实施部门（英文）
          departmentEnglish:'',
          //记录实施部门（俄文）
          departmentRussian:'',
          //记录检测频次
          frequency:100,
          //记录创建时间
        }
      ],
      //作为修改本行的临时周转变量
      tableDataTemp: {
        //记录唯一的ID
        id:0,
        //记录车间名称（附表，统一用英文名称）
        workshopEnglish:'',
        //记录返工返修作业文件的名称（附表，统一用英文名称）
        taksNameEnglish:'',
        //记录图片的文件名
        fileNameAll:'',
        //记录检验项目
        project:'',
        //记录检验项目（英文）
        projectEnglish:'',
        //记录检验项目（俄文）
        projectRussian:'',
        //记录检验要求
        requirement:'',
        //记录检验要求（英文）
        requirementEnglish:'',
        //记录检验要求（俄文）
        requirementRussian:'',
        //记录检测类型
        typeTesting:'',
        //记录标准值
        standard:'',
        //记录上偏差
        ceiling:'',
        //记录下偏差
        lower:'',
        //记录创建时间
        establishTime:null,
        //记录实施部门
        department:'',
        //记录实施部门（英文）
        departmentEnglish:'',
        //记录实施部门（俄文）
        departmentRussian:'',
        //记录检测频次
        frequency:100,
      },
      //临时记录，对于是否有修改
      //选择标准类型的选择器
      typeTestingTemp: [{
        //计量型
        value: 'metering',
        label: 'metering/计量型'
      }, {
        //计数型
        value: 'count',
        label: 'count/计数型'
      },
        {
          //计数型
          value: '请选择',
          label: '请选择'
        }],
      //记录用户选择的标准类型
      typeTestingValue: '',
      //控制每一行中的编辑中的按钮，进行弹窗控制
      editDialogVisible:false,
      //记录上传图片文件的列表
      fileList:[],
      //记录图片目录，传给上传文件的图片列表中的显示用,点击编辑的时候，传递给子窗口（图片上传）
      pictureList:[],
      //确认检测类型，如果是计量型，需要填写标准值的判断值
      isMetering:false,
    }
  },
  props:['ChildrenLabel','parentLabel','workshopEnglish','taksNameEnglish','labelIndex'],

  methods:{
    /*公共用的函数放置区*/
    //点击树形导航结构，筛选出列表内容
    repairTestingList(){
      //判断是否为当前展示的标签页（当前展示的标签页Index是3）
      if (this.labelIndex==='3'){
        this.$request.post('/repairTestingList',{
          workshopEnglish:this.workshopEnglish,
          taksNameEnglish:this.taksNameEnglish
        }).then(result=>{
          this.tableData=result.data
        })
      }
    },
    //用在点击“标准检测”列表中的每一行中的“编辑”，进行弹窗显示
    handleEdit(row){
      this.tableDataTemp=row
      //给检测类型赋值，形成默认值
      this.isMetering=false
      this.editDialogVisible=true
      console.log(this.tableDataTemp.typeTesting)
      /**对这一行中的照片进行回显。*/
      //把记录图片数据的数组清空
      this.pictureList=[]
      //拿到数据库中存放的图片文件名称信息。
      if (this.tableDataTemp.fileNameAll!==null){
        let pictureV=this.tableDataTemp.fileNameAll.split("|*|");
        if (pictureV.length>0){
          pictureV.pop()
          //把拿到数据库中存放的图片文件名称转换为路径信息
          let temp={}
          for (let i=0;i<pictureV.length;i++){
            temp={
              name:"index"+i.toString(),
              url:filepath+pictureV[i].toString()
            }
            this.pictureList.push(temp)
          }
        }
      }
},
    //接收到了上传文件子组件的数据
    fileListAll(fileList){
      this.fileList=fileList
    },
    //修改数据,保存到数据库中
    editDialogConf(){
      console.log("开始向后端传递图片")
      let temp = JSON.parse((JSON.stringify(this.tableDataTemp)))
      /*校验数据，对数据不合理的进行杜绝*/
      //不允许为空的数据校验
      if (this.tableDataTemp.project===''){
        alert("中文检测项目为空，请补充")
      } else {
        if (this.tableDataTemp.projectEnglish===''){
          alert('英文检测项目为空，请补充')
        }else {
          if(this.tableDataTemp.projectRussian===''){
            alert('俄文检测项目为空，请补充')
          }else {
            if (this.tableDataTemp.requirement===''){
              alert('中文检测要求为空，请补充')
            }else {
              if (this.tableDataTemp.requirementEnglish===''){
                alert('英文的检测要求为空，请补充')
              }else {
                if(this.tableDataTemp.requirementRussian===''){
                  alert('俄文的检测要求为空，请补充')
                }else {

                  //校验，如果数据没有变化，就不向后端发送请求了
                  if (this.tableDataTemp ===temp){
                    alert("数据无更新信息，如果宁确定不更新，请点击“取消”按钮")
                  }else {
                    //判断传来的是否为空，如果为空，不进行操作，直接保存数据
                    if (this.fileList.length!==0){
                      // this.editDialogVisible = false;
                      //创建一个对象，给后端发送数据
                      const formData=new FormData();
                      // 发送请求，修改数据，需要修改的数据是两个，一个是操作说明内的内容，一个是上传的图片；
                      //记录文件名，存放的是原来有的文件，本次修改没有变化的文件名。
                      let fileName="";
                      // 遍历用户选择的文件列表
                      for (let i = 0; i < this.fileList.length; i++) {
                        //判断是否为新加入的文件，如果不是新加入的文件，用fileName记录下来文件名；
                        if(this.fileList[i].raw==null){
                          let index =this.fileList[i].url.lastIndexOf("\\");
                          if(index===-1){
                            index=this.fileList[i].url.lastIndexOf("/");
                          }
                          fileName=fileName+this.fileList[i].url.slice(index+1)+"|*|"
                        } else {
                          // 将文件添加到FormData中，准备传给后端，如果没有，假如的是一个null
                          formData.append('fileListV', this.fileList[i].raw);
                        }
                      }
                      if(formData.getAll('fileListV').length===0){
                        //注意，查文件的时候要看这里
                        formData.append('fileListV', new Blob(undefined, undefined), 'empty'); ``
                      }
                      //循环完成后，需要再组合一下formData，把数据合并，修改的”文本数据“，修改的”文件“数据。
                      //首选把临时记录和后端对接的数据中的fileNameAll修改掉，这里面可能有需要删除的文件，记录的是和上一次一样的文件名，后端判断是否有需要删除的，是否有新增的，再合并为一个全新的文件名。
                      this.tableDataTemp.fileNameAll=fileName;
                      //去掉创建日期选项，总是报错
                      // 如果你使用的是 ESLint，并且想要告诉 ESLint 忽略这一行
                      // eslint-disable-next-line no-unused-vars
                      const {establishTime, ...newTableDataTemp} = this.tableDataTemp;
                      formData.append("tableDataTemp",JSON.stringify(newTableDataTemp))
                      console.log(newTableDataTemp)
                      //向后端发送请求，请求的路径与“拆解分析”中的文件保存是一样的
                      this.$requestFile({
                        method:"put",
                        url:"/TestingModifySteps",
                        data:formData,
                      }).then(result=>{
                        if (result.code === 401){
                          this.$router.push('UserLogin')
                          alert("您未登录，请登录")
                        }else {
                          this.$request({
                            method:'put',
                            url:'/TestingModifyStepsString',
                            data:newTableDataTemp,
                          }).then(result=>{
                            if (result.code === 401){
                              this.$router.push('UserLogin')
                              alert("您未登录，请登录")
                            }else {
                              alert(result.data)
                              location.reload()
                              this.editDialogVisible=false
                            }
                          })
                        }
                      }).catch(error => {
                        let errorMessage="出错了，请联系管理员！"+error.toString()
                        alert(errorMessage)
                      })
                    }else {
                      this.$request({
                        method:'put',
                        url:'/TestingModifyStepsString',
                        data:this.tableDataTemp,
                      }).then(result=>{
                        if (result.code === 401){
                          this.$router.push('UserLogin')
                          alert("您未登录，请登录")
                        }else {
                          alert(result.data)
                          location.reload()
                          this.editDialogVisible=false
                        }
                      })
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    rowClick(row){
      //把图片数据发给图片显示软件
      this.$bus.$emit('obtainUrl',row.fileNameAll)
    },
  },
  watch:{
    taksNameEnglish(){
      //执行查询类别功能了
      this.repairTestingList()
    },
    typeTestingValue(newVal){
      if (newVal==='请选择' || newVal==='count'){
        this.isMetering=false
      } else {
        this.isMetering=true
      }
    }
  },
  mounted() {
  }

}
</script>

<style scoped>

.button-container {
  display: flex;
  justify-content: flex-end;
}
.card-edit{
  margin-top: 5px;
  margin-left: 25px;
  margin-bottom: 15px;
  width:30%;
  position: relative;
}
.inputD{
  margin-top: 10px;
  border-width: 1px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为虚线 */
  padding: 10px; /* 添加内边距 */
}

</style>